<template>
    <div>
        <div style="padding: 10px;" class="test">
            <!--            分页栏-->
            <div style="margin: 10px 0;">

                <el-form label-width="80px" size="small" style="margin:0 40px;" :rules="rules" :model="form" ref="form">
                    <el-form-item label="试卷ID" style="display: none">
                        <el-input v-model="form.paperId" style="width: 205px;" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="试卷名称" prop="paperName" ref="paperName">
                        <el-input v-model="form.paperName" style="width: 205px;" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程名称" prop="courseId" ref="courseId">
                        <el-select clearable filterable v-model="form.courseId" placeholder="请选择"
                                   @change="getQuestionCount">
                            <el-option v-for="item in course" :key="item.courseId" :label="item.courseName"
                                       :value="item.courseId"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="组卷类型" prop="makePaperMethod" ref="makePaperMethod">
                        <el-select v-model="form.makePaperMethod" placeholder="请选择"
                                   @change="changeMakePaperMethodHandle">
                            <el-option v-for="item in makePaperMethod" :key="item.id" :label="item.value"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--添加试卷信息-->
                    <el-form-item label="添加题目" v-if="form['makePaperMethod'] == 1">
                        <el-button type="primary" style="margin-left: 20px;" @click="addQuestion">添加题目</el-button>
                    </el-form-item>

                    <el-form-item label="组卷信息" v-show="form['makePaperMethod'] == 2">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix" style="height: 35px;">
                                <el-form-item prop="difficult" label="试卷难度" ref="difficult">
                                    <el-select v-model="form.difficult" placeholder="请选择试卷难度">
                                        <el-option v-for="item in difficultList" :key="item.id" :label="item.value"
                                                   :value="item.id"></el-option>
                                    </el-select>
                                    <span style="float: right;height: 20px;line-height: 35px;color: red;font-size: 14px;font-weight: bold;">试卷总分：{{form.score}}分</span>
                                </el-form-item>
                            </div>
                            <el-descriptions direction="vertical" :column="6" border>
                                <el-descriptions-item label="单选题数量">
                                    <el-form-item prop="radioQuestionCount" ref="radioQuestionCount">
                                        <div style="display: inline-block;">
                                            <el-input-number style="display: inline-block;"
                                                             v-model="form.radioQuestionCount" controls-position="right"
                                                             :min="0"></el-input-number>
                                            <span style="font-size: 14px;margin-left: 5px;">/{{ questionCounts[1] }}</span>

                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="单选题分数">
                                    <el-form-item prop="radioScore" ref="radioScore">
                                        <el-input-number style="display: inline-block;" v-model="form.radioScore"
                                                         controls-position="right" :min="0"></el-input-number>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="多选题数量">
                                    <el-form-item prop="checkboxQuestionCount" ref="checkboxQuestionCount">
                                        <div style="display: inline-block;">
                                            <el-input-number style="display: inline-block;"
                                                             v-model="form.checkboxQuestionCount"
                                                             controls-position="right"
                                                             :min="0"></el-input-number>
                                            <span style="font-size: 5px;margin-left: 5px;">/{{questionCounts["1"]}}</span>
                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>

                                <el-descriptions-item label="多选题分数">
                                    <el-form-item prop="checkboxScore" ref="checkboxScore">
                                        <el-input-number style="display: inline-block;" v-model="form.checkboxScore"
                                                         controls-position="right" :min="0"></el-input-number>
                                    </el-form-item>
                                </el-descriptions-item>

                                <el-descriptions-item label="判断题数量">
                                    <el-form-item prop="judgeQuestionCount" ref="judgeQuestionCount">
                                        <div style="display: inline-block;">
                                            <el-input-number style="display: inline-block;"
                                                             v-model="form.judgeQuestionCount" controls-position="right"
                                                             :min="0"></el-input-number>
                                            <span style="font-size: 14px;margin-left: 14px;">/{{questionCounts[3]}}</span>
                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="判断题分数">
                                    <el-form-item prop="judgeScore" ref="judgeScore">
                                        <el-input-number style="display: inline-block;" v-model="form.judgeScore"
                                                         controls-position="right" :min="0"></el-input-number>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>

                        </el-card>
                    </el-form-item>
                    <!--                    固定组卷-->
                    <div v-show="form['makePaperMethod'] == 1">
                        <el-form-item label="试卷信息">
                            <el-card class="box-card">
                                <el-descriptions direction="vertical" :column="6" border>
                                    <el-descriptions-item label="单选题数量">
                                        <el-tag size="small">{{form.radioQuestionCount}}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="多选题数量">
                                        <el-tag size="small">{{form.checkboxQuestionCount}}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="判断题数量">
                                        <el-tag size="small">{{form.judgeQuestionCount}}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="填空题数量">
                                        <el-tag size="small">{{form.fillQuestionCount}}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="客观题数量">
                                        <el-tag size="small">{{form.objectiveQuestionCount}}</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="试卷总分">
                                        <el-tag size="small">{{form.score}}</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>

                            </el-card>
                        </el-form-item>
                        <el-form-item label="单选题">
                            <el-card class="box-card">
                                <div v-for="(question,index) in form.questionList" :key="index">
                                    <div v-if="question.questionType == 1">
                                        <el-form-item :label="`题目：`">
                                            <el-row :gutter="20">
                                                <el-col :span="20">
                                                    <div class="grid-content bg-purple"
                                                         v-html="question.questionTitle"></div>
                                                    <div class="answer">
                                                        <span>A. {{question.optionA}}</span>
                                                        <span>B. {{question.optionB}}</span>
                                                        <span>C. {{question.optionC}}</span>
                                                        <span>D. {{question.optionD}}</span>
                                                    </div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="grid-content bg-purple">
                                                        <el-button type="text" @click="deleteQuestion(index)">删除
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-form-item>
                        <el-form-item label="多选题">
                            <el-card class="box-card">
                                <div v-for="(question,index) in form.questionList" :key="index">
                                    <div v-if="question.questionType == 2">
                                        <el-form-item :label="`题目：`">
                                            <el-row :gutter="20">
                                                <el-col :span="20">
                                                    <div class="grid-content bg-purple"
                                                         v-html="question.questionTitle"></div>
                                                    <div class="answer">
                                                        <span>A. {{question.optionA}}</span>
                                                        <span>B. {{question.optionB}}</span>
                                                        <span>C. {{question.optionC}}</span>
                                                        <span>D. {{question.optionD}}</span>
                                                    </div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="grid-content bg-purple">
                                                        <el-button type="text" @click="deleteQuestion(index)">删除
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-form-item>

                        <el-form-item label="判断题">
                            <el-card class="box-card">
                                <div v-for="(question,index) in form.questionList" :key="index">
                                    <div v-if="question.questionType == 3">
                                        <el-form-item :label="`题目：`">
                                            <el-row :gutter="20">
                                                <el-col :span="20">
                                                    <div class="grid-content bg-purple"
                                                         v-html="question.questionTitle"></div>
                                                    <div class="answer">
                                                        <span>{{question.optionA}}</span>
                                                        <span>{{question.optionB}}</span>
                                                    </div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="grid-content bg-purple">
                                                        <el-button type="text" @click="deleteQuestion(index)">删除
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-form-item>
                        <el-form-item label="填空题">
                            <el-card class="box-card">
                                <div v-for="(question,index) in form.questionList" :key="index">
                                    <div v-if="question.questionType == 4">
                                        <el-form-item :label="`题目：`">
                                            <el-row :gutter="20">
                                                <el-col :span="20">
                                                    <div class="grid-content bg-purple"
                                                         v-html="question.questionTitle"></div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="grid-content bg-purple">
                                                        <el-button type="text" @click="deleteQuestion(index)">删除
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-form-item>

                        <el-form-item label="客观题">
                            <el-card class="box-card">
                                <div v-for="(question,index) in form.questionList" :key="index">
                                    <div v-if="question.questionType == 5">
                                        <el-form-item :label="`题目：`">
                                            <el-row :gutter="20">
                                                <el-col :span="20">
                                                    <div class="grid-content bg-purple"
                                                         v-html="question.questionTitle"></div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="grid-content bg-purple">
                                                        <el-button type="text" @click="deleteQuestion(index)">删除
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-card>
                        </el-form-item>
                    </div>

                    <div>
                        <SelectQuestion :course-id="form.courseId" :question-dialog-visible="questionDialogVisible"
                                        @trans_select="get_select"></SelectQuestion>
                    </div>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-form-item label="考试类型" prop="paperType" ref="paperType">
                                    <el-select v-model="form.paperType" placeholder="请选择"
                                               @change="changePaperTypeHandle">
                                        <el-option v-for="item in paperType" :key="item.id" :label="item.value"
                                                   :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-form-item label="考试时长（分钟）" label-width="150px" prop="suggestTime" ref="suggestTime">
                                    <el-input-number v-model="form.suggestTime" :precision="0" :step="1" :min="1"
                                                     :max="1200"
                                    ></el-input-number>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-form-item label="考试时段" v-if="datetimeFlag" prop="datetime" ref="datetime">
                        <template>
                            <div class="block">
                                <el-date-picker
                                        v-model="datetime"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="changeDatetimeHandle"
                                >
                                </el-date-picker>
                            </div>
                        </template>
                    </el-form-item>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div>
                                <el-form-item label="试卷类型" prop="examType" ref="examType">
                                    <el-select v-model="form.examType" placeholder="请选择">
                                        <el-option v-for="item in examType" :key="item.id" :label="item.value"
                                                   :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-form-item label="使用状态" label-width="150px" prop="useStatus" ref="useStatus">
                                    <el-switch
                                            v-model="form.useStatus"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-value="1"
                                            inactive-value="0"
                                    >
                                    </el-switch>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="margin-left:10%;">
                    <el-button size="median" type="primary" @click="submitForm('form')" v-preventReClick>确 定</el-button>
                    <el-button size="median" @click="reset">重 置</el-button>

                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import request from "../utils/request";
    import {serverIp} from "../../public/config";
    import SelectQuestion from "./SelectQuestion"

    export default {
        name: '试卷创编',
        components: {SelectQuestion,},
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                form: {
                    useStatus: "1",
                    score: 0,
                    difficult: 3,
                    createTime: new Date(),
                    suggestTime: 5,
                    questionList: [],
                    makePaperMethod: 1,
                    radioQuestionCount: 0,
                    checkboxQuestionCount: 0,
                    judgeQuestionCount: 0,
                    fillQuestionCount: 0,
                    objectiveQuestionCount: 0,
                    paperType: 1,
                    radioScore: 0,
                    checkboxScore: 0,
                    judgeScore: 0,
                },
                questionCountData: [{name: "杨"}],
                radioIndex: 0,
                datetime: {},
                datetimeFlag: false,
                roles: {},
                user: {},
                serverIp: serverIp,
                dialogVisible: false,
                questionDialogVisible: false,
                index: null,
                search: '',
                pageSize: 5,
                pageNum: 1,
                total: 20,
                key: 0,
                tableData: [],
                teacher: [],
                course: [],
                content: '',
                formType: '',
                correct: [],
                paperScore: 0,
                questionCounts: {},
                correctAnswer: [{value: "A"}, {value: "B"}, {value: "C"}, {value: "D"}],
                paperType: [{id: 1, value: '固定试卷'}, {id: 4, value: '时段试卷'}],
                examType: [{id: 0, value: '正式考试'}, {id: 1, value: '上机练习'}],
                makePaperMethod: [{id: 1, value: '固定组卷'}, {id: 2, value: '随机组卷'}],
                texts: ['很简单', '简单', '一般', '难', '很难'],
                difficultList: [{id: 1, value: '很简单'},
                    {id: 2, value: '简单'},
                    {id: 3, value: '一般'},
                    {id: 4, value: '难'},
                    {id: 5, value: '很难'}],
                rules: {
                    courseId: [
                        {required: true, message: '请选择课程名称', trigger: 'change'},
                    ],
                    paperName: [
                        {required: true, message: '请输入课程名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '请输入3-20个字符', trigger: 'blur'},
                    ],
                    difficult: [
                        {required: true, message: '请输入难度', trigger: 'blur'}
                    ],
                    makePaperMethod: [
                        {required: true, message: '请选择组卷类型', trigger: 'change'}
                    ],
                    radioQuestionCount: [
                        {required: true, message: '请输入题目数量', trigger: 'blur'}
                    ],
                    radioScore: [
                        {required: true, message: '请输入每题分值', trigger: 'blur'}
                    ],
                    checkboxQuestionCount: [
                        {required: true, message: '请输入题目数量', trigger: 'blur'}
                    ],
                    checkboxScore: [
                        {required: true, message: '请输入每题分值', trigger: 'blur'}
                    ],
                    judgeQuestionCount: [
                        {required: true, message: '请输入题目数量', trigger: 'blur'}
                    ],
                    judgeScore: [
                        {required: true, message: '请输入每题分值', trigger: 'blur'}
                    ],
                },
                customToolbar: [
                    ["bold", "italic", "underline"],
                    [{list: "ordered"}, {list: "bullet"}],
                    // ["image", "code-block"]
                ],
                activeName: null,

            }
        },
        created() {
            this.getUser();
            this.form["teacherId"] = this.user.userId;//初始化教师ID
            this.getTeacher();
            this.getCourse();
            if (this.$route.params.form) {
                console.log(this.$route.fullPath)
                this.form = this.$route.params.form;
                if (this.form['questionList'] == null) {
                    this.form['questionList'] = [];
                }
            }
            this.changePaperTypeHandle();//是否显示时间段
            this.getQuestionCount();
            console.log("editPaper:处理后form:")
            console.log(this.form)
        },
        watch: {
            form: { //监听的对象
                deep: true, //深度监听设置为 true
                handler: function (newForm, oldForm) {
                    //重新计算分数
                    this.computePaperScore();
                }
            },
        },
        methods: {
            getUser() {
                this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
                if (!this.user) {
                    this.$message.info("获取用户失败，请重新登录")
                }
            },
            computePaperScore() {
                if (this.form['makePaperMethod'] == 2) {
                    //随机组卷总分
                    let radio = this.form.radioQuestionCount * this.form.radioScore || 0;
                    let checkbox = this.form.checkboxQuestionCount * this.form.checkboxScore || 0;
                    let judge = this.form.judgeQuestionCount * this.form.judgeScore || 0;
                    this.form.score = radio + checkbox + judge;
                } else {
                    //固定组卷总分
                    let score = 0;
                    if (this.form.questionList.length > 0) {
                        this.form.questionList.forEach((question) => {
                            score = score + question.score;
                        })
                    }
                    this.form['score'] = score;
                }

            },
            reset() {
                //初始化
                this.form = {
                    useStatus: "1",
                    score: 0,
                    difficult: 3,
                    createTime: new Date(),
                    suggestTime: 5,
                    questionList: [],
                    makePaperMethod: 1,
                    radioQuestionCount: 0,
                    checkboxQuestionCount: 0,
                    judgeQuestionCount: 0,
                    fillQuestionCount: 0,
                    objectiveQuestionCount: 0,
                    paperType: 1,
                    radioScore: 0,
                    checkboxScore: 0,
                    judgeScore: 0,
                }
            },
            locate(valid, object) {
                let split = ''
                for (let i in object) {
                    let dom = this.$refs[i]
                    if (Object.prototype.toString.call(dom) !== '[object Object]') {
                        //这里是针对遍历的情况（多个输入框），取值为数组
                        dom = dom[0]
                        // 第一个未填写必填项的表单被记录，这个是为了处理如何把校验未成功的第一个面板展开
                        split = dom.prop
                        let index = split.indexOf('.')
                        let last = split.lastIndexOf('.')
                        // 通过未填写的表单索引展开折叠面板
                        this.activeName = Number(split.slice(index + 1, last))
                        console.log(split)
                        break
                    }
                    console.log(dom.$el)
                    dom.$el.scrollIntoView({
                        //滚动到指定节点
                        block: 'start', //值有start,center,end，nearest，当前显示在视图区域中间
                        behavior: 'instant' //值有auto、instant,smooth，缓动动画（当前是慢速的）
                    })
                    return false
                }
            },
            getQuestionCount() {
                //获取随机组卷题库信息
                if (!this.form['courseId']) {
                    return;
                }
                for (let i = 1; i < 6; i++) {
                    this.questionCounts[i] = 0;
                }
                request.get("/question/find/" + this.form['courseId']).then(res => {
                    const data = res.data;
                    data.forEach(map => {
                        this.questionCounts[parseInt(map["questionType"])] = map["count"];
                    })
                    console.log("questionCounts:", this.questionCounts)
                    this.$forceUpdate() //有问题
                })
            },
            submitForm(formName) {
                let mess = this;
                this.$refs[formName].validate((valid, object) => {
                    if (valid) {
                        // alert('submit!');
                        this.save();//提交保存
                    } else {
                        mess.locate(valid, object);
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            save() {
                //计算题目总数量
                this.form.questionCount = this.form.radioQuestionCount
                    + this.form.checkboxQuestionCount
                    + this.form.judgeQuestionCount
                    + this.form.fillQuestionCount
                    + this.form.objectiveQuestionCount;
                console.log("保存前的form:", this.form);
                if (this.form.paperId) { // 更新
                    request.post('/paper/save', this.form).then(res => {
                        console.log("code:", res.code)
                        if (res.code == '200') {
                            this.$message.success("保存成功")
                        } else {
                            this.$message.error("保存失败")
                        }
                    }).catch((err) => {
                        this.$message.error(err);
                    })
                } else { //新增
                    request.post("/paper/save", this.form).then(res => {
                        console.log(res.data)
                        if (res.code == '200') {
                            this.$message.success("添加成功")
                        } else {
                            this.$message.error("添加失败")
                        }
                    }).catch((err) => {
                        this.$message.error("添加失败");
                        this.$message.error(err);
                    })
                }
            },
            getTeacher() {
                //请求教师信息数据
                request.get("/teacher/findAll").then(res => {
                    console.log("res:", res);
                    this.teacher = res.data
                })
            },
            getCourse() {
                //请求课程信息数据
                if (this.user.role == "ROLE_TEACHER") {
                    var params = {
                        teacherId:this.user.userId
                    }
                }else{
                    var params = {
                        teacherId:""
                    }
                }
                request.get("/course/findAll", {
                    params: params
                }).then(res => {
                    console.log("res:", res);
                    this.course = res.data
                })
            },
            changeDatetimeHandle() {
                if (this.datetime.length == 2) {
                    this.form['limitStartTime'] = this.datetime[0];
                    this.form['limitEndTime'] = this.datetime[1];
                }
            },
            changePaperTypeHandle() {
                console.log(this.form['paperType'])
                if (this.form['paperType'] == 4) {
                    this.datetimeFlag = true;
                } else {
                    this.datetimeFlag = false;
                    delete this.form['limitStartTime'];
                    delete this.form['limitEndTime'];
                }
                this.changeDatetimeHandle();
            },
            changeMakePaperMethodHandle() {
                //组卷方式改变
                //隐藏添加标题按钮
                //隐藏标题内容
                //随机组卷前,必须先选择课程
                if (this.form['makePaperMethod'] == 2) {
                    if (!this.form["courseId"]) {
                        this.$message.info("请先填写课程名称")
                        this.form['makePaperMethod'] = 1;
                    }
                }
            },
            addQuestion() {
                if (!this.form["courseId"]) {
                    this.$message.info("请先填写课程名称")
                    return;
                }
                console.log("form:", this.form)
                this.questionDialogVisible = true;
            },
            deleteQuestion(index) {
                //index为题目序号
                this.form.questionList.splice(index, 1);
                this.changeQuestionCount();
            },
            get_select(list) {
                list.forEach(question => {
                    this.form.questionList.push(question)
                })
                //处理出现相同的题目
                this.form.questionList = this.unique(this.form.questionList);
                console.log("questionList", this.form.questionList)
                this.computePaperScore() //计算试卷总分
                this.questionDialogVisible = false;
                console.log("回传list处理后form：", this.form)
                this.changeQuestionCount();
            },
            unique(arr) {
                const res = new Map();
                return arr.filter((arr) => !res.has(arr.questionId) && res.set(arr.questionId, 1));
            },
            changeQuestionCount() {
                let groupList = [];
                for (let i = 1; i < 6; i++) {
                    groupList[i] = [];//数组初始化
                }
                for (const question of this.form["questionList"]) {
                    //数据分组
                    if (groupList[question.questionType]) {
                        groupList[question.questionType].push(question);
                    }
                }
                console.log("groupList:", groupList)
                console.log("groupList3:", groupList[3])
                this.form['radioQuestionCount'] = groupList[1].length;
                this.form['checkboxQuestionCount'] = groupList[2].length;
                this.form['judgeQuestionCount'] = groupList[3].length;
                this.form['fillQuestionCount'] = groupList[4].length;
                this.form['objectiveQuestionCount'] = groupList[5].length;
            },
        },
    }
</script>
<style>
    .answer span {
        margin-right: 20px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /* el-descriptions-item 文字居中 */
    .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
        text-align: center;
    }

</style>



